<template>
  <div class="dashboard-container">
    <!-- 第一行：统计卡片 -->
    <el-row :gutter="20" class="summary-row">
      <el-col :span="6">
        <el-card shadow="hover" class="summary-card bg-blue">
          <div class="card-content">
            <div class="icon-section">
              <el-icon><User /></el-icon>
            </div>
            <div class="text-section">
              <div class="card-title">总用户数</div>
              <div class="card-value">10,240</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="summary-card bg-green">
           <div class="card-content">
            <div class="icon-section">
              <el-icon><View /></el-icon>
            </div>
            <div class="text-section">
              <div class="card-title">今日访问量</div>
              <div class="card-value">2,350</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="summary-card bg-orange">
           <div class="card-content">
            <div class="icon-section">
              <el-icon><Goods /></el-icon>
            </div>
            <div class="text-section">
              <div class="card-title">商品总数</div>
              <div class="card-value">8,800</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="summary-card bg-red">
           <div class="card-content">
            <div class="icon-section">
              <el-icon><Money /></el-icon>
            </div>
            <div class="text-section">
              <div class="card-title">总销售额</div>
              <div class="card-value">¥ 150,680</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：图表 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>周访问量趋势</span>
            </div>
          </template>
          <div ref="lineChartRef" style="height: 350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
           <template #header>
            <div class="card-header">
              <span>用户来源</span>
            </div>
          </template>
          <div ref="pieChartRef" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

     <!-- 第三行：图表 -->
     <el-row :gutter="20" style="margin-top: 20px;">
       <el-col :span="24">
         <el-card shadow="never">
           <template #header>
             <div class="card-header">
               <span>分类销售额</span>
             </div>
           </template>
           <div ref="barChartRef" style="height: 350px;"></div>
         </el-card>
       </el-col>
     </el-row>

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { LineChart, PieChart, BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent, // 如果使用 dataset 管理数据
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { User, View, Goods, Money } from '@element-plus/icons-vue'; // 引入图标

// 注册 ECharts 组件和图表
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  LineChart,
  PieChart,
  BarChart,
  CanvasRenderer
]);

// --- Refs for Chart DOM elements ---
const lineChartRef = ref(null);
const pieChartRef = ref(null);
const barChartRef = ref(null);

// --- Chart Instances ---
let lineChart = null;
let pieChart = null;
let barChart = null;

// --- Mock Data (Replace with API calls) ---
const mockLineData = {
  xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  series: [1200, 1400, 1008, 1600, 1300, 1800, 1500]
};

const mockPieData = [
  { value: 1048, name: '搜索引擎' },
  { value: 735, name: '直接访问' },
  { value: 580, name: '邮件营销' },
  { value: 484, name: '联盟广告' },
  { value: 300, name: '视频广告' }
];

const mockBarData = {
  categories: ['电子产品', '服装鞋帽', '家居用品', '美妆护肤', '图书音像'],
  values: [18203, 23489, 29034, 104970, 131744]
};

// --- Chart Options ---
const lineOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: mockLineData.xAxis
  },
  yAxis: { type: 'value' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  series: [{
    name: '访问量',
    type: 'line',
    smooth: true,
    data: mockLineData.series,
    areaStyle: { // 添加面积图效果
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.8)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ])
    },
    itemStyle: { color: '#409EFF' }, // 线条颜色
    lineStyle: { width: 3 }
  }]
});

const pieOption = ref({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'center'
  },
  series: [{
    name: '用户来源',
    type: 'pie',
    radius: ['40%', '70%'], // 设置为环形图
    center: ['65%', '50%'], // 调整中心位置以适应图例
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: { show: false, position: 'center' }, // 隐藏标签，可在中心显示总数
    emphasis: {
      label: { // 鼠标悬浮时在中心显示标签
        show: true,
        fontSize: '20',
        fontWeight: 'bold'
      }
    },
    labelLine: { show: false },
    data: mockPieData
  }]
});

const barOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    data: mockBarData.categories,
    axisTick: { alignWithLabel: true }
  },
  yAxis: { type: 'value' },
  series: [{
    name: '销售额',
    type: 'bar',
    barWidth: '60%',
    data: mockBarData.values,
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
        ])
    },
    emphasis: {
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
            ])
        }
    },
  }]
});

// --- Initialize Charts ---
const initCharts = async () => {
  await nextTick(); // 确保 DOM 元素已挂载

  // --- 初始化折线图 ---
  if (lineChartRef.value) {
    lineChart = echarts.init(lineChartRef.value);
    // 在这里可以添加 API 调用来获取真实数据并更新 lineOption.value
    lineChart.setOption(lineOption.value);
  }

  // --- 初始化饼图 ---
  if (pieChartRef.value) {
    pieChart = echarts.init(pieChartRef.value);
    // 在这里可以添加 API 调用来获取真实数据并更新 pieOption.value
    pieChart.setOption(pieOption.value);
  }

   // --- 初始化柱状图 ---
  if (barChartRef.value) {
    barChart = echarts.init(barChartRef.value);
    // 在这里可以添加 API 调用来获取真实数据并更新 barOption.value
    barChart.setOption(barOption.value);
  }
};

// --- Resize Handler ---
const handleResize = () => {
  lineChart?.resize();
  pieChart?.resize();
  barChart?.resize();
};

// --- Lifecycle Hooks ---
onMounted(() => {
  initCharts();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  // 销毁 ECharts 实例
  lineChart?.dispose();
  pieChart?.dispose();
  barChart?.dispose();
});

</script>

<style scoped>
.dashboard-container {
  /* padding: 20px; */
  background-color: #f0f2f5;
}

.summary-row {
  margin-bottom: 20px;
}

.summary-card {
  border-radius: 8px;
  color: #fff;
  border: none; /* 移除默认边框 */
}
.summary-card .el-card__body {
    padding: 0; /* 移除卡片内部 padding，由 .card-content 控制 */
}

.card-content {
    display: flex;
    align-items: center;
    padding: 20px; /* 内部内容 padding */
    height: 100px; /* 固定高度 */
}

.icon-section {
    font-size: 48px; /* 图标大小 */
    width: 60px; /* 图标区域宽度 */
    text-align: center;
    margin-right: 15px;
    opacity: 0.8;
}

.text-section {
    flex-grow: 1;
}

.card-title {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
}

/* 不同卡片的背景色 */
.bg-blue { background-color: #409EFF; }
.bg-green { background-color: #67C23A; }
.bg-orange { background-color: #E6A23C; }
.bg-red { background-color: #F56C6C; }

/* 图表卡片 */
.el-card {
  border-radius: 4px;
}
.card-header {
  font-weight: bold;
  font-size: 16px;
}
</style>